﻿@model ProductDetailsModel
@inject SeoSettings seoSettings
@inject IWorkContextAccessor workContextAccessor
@inject IPageHeadBuilder pagebuilder

@{
    Layout = "_SingleColumn";

    //title, meta
    pagebuilder.AddTitleParts(!string.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
    pagebuilder.AddMetaDescriptionParts(Model.MetaDescription);
    pagebuilder.AddMetaKeywordParts(Model.MetaKeywords);

    //canonical URL
    if (seoSettings.CanonicalUrlsEnabled)
    {
        var productUrl = Url.RouteUrl("Product", new { Model.SeName }, Url.ActionContext.HttpContext.Request.Scheme);
        pagebuilder.AddCanonicalUrlParts(productUrl);
    }
}

@section meta {
    @if (seoSettings.OpenGraphMetaTags)
    {
        <meta property=og:type content=product/>
        <meta property="og:title" content="@Html.Encode(Model.Name)"/>
        <meta property="og:description" content="@Html.Encode(Model.MetaDescription)"/>
        <meta property="og:image" content="@Model.DefaultPictureModel.ImageUrl"/>
        <meta property="og:image:url" content="@Model.DefaultPictureModel.ImageUrl"/>
        <meta property="og:url" content="@Url.ActionContext.HttpContext.Request.GetEncodedUrl()"/>
        <meta property="og:site_name" content="@Html.Encode(Model.CurrentStoreName)"/>
    }

    @if (seoSettings.TwitterMetaTags)
    {
        <meta property="twitter:card" content="summary"/>
        <meta property="twitter:site" content="@Html.Encode(Model.CurrentStoreName)"/>
        <meta property="twitter:title" content="@Html.Encode(Model.Name)"/>
        <meta property="twitter:description" content="@Html.Encode(Model.MetaDescription)"/>
        <meta property="twitter:image" content="@Model.DefaultPictureModel.ImageUrl"/>
        <meta property="twitter:url" content="@Url.ActionContext.HttpContext.Request.GetEncodedUrl()"/>
    }
}

<!--product breadcrumb-->

@section Breadcrumb
{
    <partial name="Partials/Breadcrumbs" model="Model.Breadcrumb"/>
}

<vc:widget widget-zone="productdetails_after_breadcrumb" additional-data="@Model.Id"></vc:widget>
<div class="page product-details-page product-standard">
    <validation-observer ref="ProductFormObserver">
        <form asp-route="Product" asp-route-sename="@Model.SeName" method="post" id=@($"product-details-form-{Model.Id}") ref="form" v-on:submit.prevent="formSubmitParam($event, vm.$refs.ProductFormObserver)">
            <div itemscope itemtype="http://schema.org/Product" data-productid="@Model.Id">
                <b-col class="position-relative">
                    <b-row>
                        <vc:widget widget-zone="productdetails_before_pictures" additional-data="@Model.Id"></vc:widget>
                        <!--product pictures-->
                        <partial name="Partials/Pictures" model="Model"/>
                        <vc:widget widget-zone="productdetails_after_pictures" additional-data="@Model.Id"></vc:widget>
                        <b-col xl="5" lg="6" md="7" cols="12" class="overview pl-md-3 pl-0 pr-0">
                            <partial name="Partials/Unavailable" model="Model"/>
                            <h1 class="generalTitle" itemprop="name">
                                @Model.Name
                            </h1>
                            <!--product reviews-->
                            @if (Model.ProductReviewOverview.AllowCustomerReviews)
                            {
                                <partial name="Partials/ProductReviewOverview" model="Model.ProductReviewOverview"/>
                            }
                            <vc:widget widget-zone="productdetails_overview_top" additional-data="@Model.Id"></vc:widget>
                            @if (!string.IsNullOrEmpty(Model.ShortDescription))
                            {
                                <div class="short-description generalMarginSupporter">
                                    @Html.Raw(Model.ShortDescription)
                                </div>
                            }
                            <!--collections-->
                            @if (Model.ProductCollections.Any())
                            {
                                <partial name="Partials/Collections" model="Model.ProductCollections"/>
                            }
                            <!--availability-->
                            @if (!string.IsNullOrWhiteSpace(Model.StockAvailability) || Model.DisplayOutOfStockSubscription)
                            {
                                <partial name="Partials/Availability" model="Model"/>
                            }
                            <!--Code products - SKU, MAN, GTIN, Vendor info -->
                            <partial name="Partials/Codes" model="Model"/>
                            <!--delivery-->
                            @if ((Model.FreeShippingNotificationEnabled && Model.IsFreeShipping) || !string.IsNullOrWhiteSpace(Model.DeliveryDate)
                                                                                                 || Model.NotReturnable || Model.AdditionalShippingCharge > 0)
                            {
                                <partial name="Partials/DeliveryInfo" model="Model"/>
                            }
                            <!--sample download-->
                            @if (Model.HasSampleDownload)
                            {
                                <partial name="Partials/DownloadSample" model="Model"/>
                            }
                            <!--product bundles-->
                            @if (Model.ProductBundleModels.Any())
                            {
                                <partial name="Partials/ProductBundles" model="Model"/>
                            }
                            <!--attributes-->
                            @if (Model.ProductAttributes.Any())
                            {
                                <partial name="Partials/ProductAttributes" model="Model"/>
                            }
                            <!--warehouses-->
                            @if (Model.AllowToSelectWarehouse)
                            {
                                <partial name="Partials/Warehouses" model="Model"/>
                            }
                            <!--gift voucher-->
                            @{
                                if (Model.GiftVoucher.IsGiftVoucher)
                                {
                                    <partial name="Partials/GiftVoucherInfo" model="Model"/>
                                }
                            }
                            <!--reservation info-->
                            @if (Model.ProductType == ProductType.Reservation)
                            {
                                var dataDictReservation = new ViewDataDictionary(ViewData)
                                {
                                    TemplateInfo =
                                    {
                                        HtmlFieldPrefix = $"reservation_{Model.Id}"
                                    }
                                };
                                <partial name="Partials/ReservationInfo" model="Model" view-data="dataDictReservation"/>
                            }
                            <!--price & add to cart-->
                            <div class="overview-buttons generalMarginSupporter">
                                @if (Model.TierPrices.Any())
                                {
                                    <div class="col-lg-12 px-0">
                                        <partial name="Partials/TierPrices" model="Model.TierPrices"/>
                                    </div>
                                }
                                <div class="col-lg-12 px-0">
                                    @{
                                        var dataDictPrice = new ViewDataDictionary(ViewData)
                                        {
                                            TemplateInfo =
                                            {
                                                HtmlFieldPrefix = $"price_{Model.Id}"
                                            }
                                        };
                                        <partial name="Partials/Prices" model="Model.ProductPrice" view-data="dataDictPrice"/>
                                    }
                                </div>
                                <div class="generalMarginSupporter">
                                    <!--auction-->
                                    @if (Model.ProductType == ProductType.Auction)
                                    {
                                        var dataDictAuction = new ViewDataDictionary(ViewData)
                                        {
                                            TemplateInfo =
                                            {
                                                HtmlFieldPrefix = $"auction_{Model.Id}"
                                            }
                                        };
                                        <partial name="Partials/AuctionInfo" model="Model" view-data="dataDictAuction"/>
                                    }
                                    @{
                                        var dataDictAddToWishlist = new ViewDataDictionary(ViewData)
                                        {
                                            TemplateInfo =
                                            {
                                                HtmlFieldPrefix = $"addtocart_{Model.Id}"
                                            }
                                        };
                                        var dataDictAddToCart = new ViewDataDictionary(ViewData)
                                        {
                                            TemplateInfo =
                                            {
                                                HtmlFieldPrefix = $"addtocart_{Model.Id}"
                                            }
                                        };
                                    }
                                    <partial name="Partials/AddToCart" model="Model.AddToCart" view-data="dataDictAddToCart"/>
                                    <b-btn-group class="mt-2 mb-3 w-100 flex-wrap">
                                        @if (Model.ProductType == ProductType.SimpleProduct || Model.ProductType == ProductType.BundledProduct)
                                        {
                                            <partial name="Partials/AddToWishlist" model="Model.AddToCart" view-data="dataDictAddToWishlist"/>
                                            <partial name="Partials/ProductsComparison" model="Model"/>
                                        }
                                        @if (Model.EmailAFriendEnabled)
                                        {
                                            <partial name="Partials/SendFriend" model="Model"/>
                                        }
                                    </b-btn-group>
                                </div>
                            </div>
                            @if (!string.IsNullOrWhiteSpace(Model.PageShareCode))
                            {
                                <div class="col-12 product-share px-0">
                                    <partial name="Partials/ShareButton" model="Model"/>
                                </div>
                            }
                            <vc:widget widget-zone="productdetails_overview_bottom" additional-data="@Model.Id"></vc:widget>
                        </b-col>
                    </b-row>
                </b-col>

                <b-col cols="12" class="px-0 my-3">
                    <div>
                        <b-tabs content-class="mt-3" align="center">
                            <b-tab title="@Loc["Products.Description"]" active>
                                @Html.Raw(Model.FullDescription)
                            </b-tab>
                            @if (Model.ProductTags.Any())
                            {
                                <b-tab title="@Loc["Products.Tags"]">
                                    <partial name="Partials/ProductTags" model="Model.ProductTags"/>
                                </b-tab>
                            }
                            @if (Model.ProductSpecifications.Any())
                            {
                                <b-tab title="@Loc["Products.Specs"]">
                                    <partial name="Partials/ProductSpecifications" model="Model.ProductSpecifications"/>
                                </b-tab>
                            }
                            @if (Model.ProductReviewOverview.AllowCustomerReviews)
                            {
                                <b-tab id="review-tab" title="@Loc["Products.Reviews"]" :active="active ? true : false">
                                    @await Component.InvokeAsync("ProductReviews", new { productId = Model.Id })
                                </b-tab>
                            }
                            @if (Model.AskQuestionOnProduct)
                            {
                                <b-tab title="@Loc["Products.ContactUs"]">
                                    <partial name="Partials/AskQuestionOnProduct" model="Model.ProductAskQuestion"/>
                                </b-tab>
                            }
                        </b-tabs>
                    </div>
                </b-col>
                <vc:products-also-purchased product-id="@Model.Id" product-thumb-picture-size="null"></vc:products-also-purchased>
                <vc:related-products product-id="@Model.Id" product-thumb-picture-size="null"></vc:related-products>
                <vc:similar-products product-id="@Model.Id" product-thumb-picture-size="null"></vc:similar-products>
            </div>
        </form>
    </validation-observer>
    @if (Model.EmailAFriendEnabled)
    {
        @await Component.InvokeAsync("ProductEmailAFriend", new { productId = Model.Id })
    }
    <vc:widget widget-zone="productdetails_bottom" additional-data="@Model.Id"></vc:widget>
</div>